.wayne-button{
  background:#ffffff;
  border-width:1px;
  border-style: solid;
  border-color: #cccccc;
  border-radius:2px;
  height:22px;
  padding: 0 8px;
  margin: 0;
  outline: none;
  font-size:12px;
  color: #777;
  text-align:center;
  letter-spacing: .45px;
  line-height:22px;
  outline: none;
  cursor: pointer;
  &:focus{
    outline: none;
  }
  &.active{
    color:#377aec;
    border:1px solid #377aec;
  }
  &.no-border{
    border: none !important;
  }
  &.text{
    background: transparent;
    border: none;
    padding: 0;
    margin: 0 8px;
    color: #377aec;
    &:hover{
      color: #1164f1;
    }
  }
  &.primary{
    background: #4a87ee;
    border: none;
    color: #fff;
  }
  &.default{
    background: #eaeaea;
    border: none;
    color: #999;
  }
  &.normal {
    background: #ffffff;
    border-color: #4a87ee;
    color: #4a87ee;
    &:hover {
      background: #4a87ee;
      color: #fff;
    }
    &:active, &.active {
      background: #1164f1;
      color: #fff;
    }
  }
  &.error{
    background:#ffffff;
    border-color:#FF3434;
    color: #FF3434;
    &:hover{
      background: #FF3434;
      color: #fff;
    }
    &:active, &.active{
      background: #FF3434;
      color: #fff;
    }
  }
  &.invalid{
    background:#ffffff;
    color: #999999;
    border-color:#999999;
    &:hover{
      background: #999999;
      color: #fff;
    }
    &:active, &.active{
      background: #999999;
      color: #fff;
    }
  }
}
